<template>
    <div class="register">
        <div class="header">
            <i @click="golog"></i>
        </div>
        <div class="reg_box">
            <div class="reg_titile">账号注册</div>
            <div class="reg_from">
                <div class="text">
                    <span>+86</span>
                    <input type="text" v-model="username" placeholder="请输入手机号" />
                </div>
                <div class="password">
                    <input type="password" v-model="password" placeholder="请输入密码" />
                </div>
            </div>
            <div class="reg_btn active" @click="register">注册</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            flag: false,
            users: "",
        };
    },
    methods: {
        golog() {
            this.$router.push({
                path: "/login",
            });
        },
        register() {
            // console.log(localStorage.users);
            this.users = localStorage.users;
            // console.log("1.0 users", this.users);
            if (this.users == undefined) {
                let usersArr = [this.username + "-" + this.password];
                // console.log("1.0 usersArr", usersArr);
                let usersStr = usersArr.toString();
                localStorage.users = usersStr;
                alert("注册成功，即将进入登录页面");
                this.golog();
            } else {
                let users = this.users;
                // console.log("2.0 users", users);
                let usersArr = users.split(",");
                // console.log("2.0 userArr", usersArr);
                // console.log("1.0", userArr);
                this.flag = false;
                for (let i = 0; i <= usersArr.length - 1; i++) {
                    let user = usersArr[i].split("-");
                    console.log("2.0", user);
                    if (user[0] == this.username) {
                        this.flag = true;
                        break;
                    }
                }
                if (this.flag) {
                    alert("该用户名已被占用，请重新注册");
                    this.username = "";
                    this.password = "";
                } else {
                    usersArr[usersArr.length] = this.username + "-" + this.password;
                    let usersStr = usersArr.toString();
                    localStorage.users = usersStr;
                    alert("注册成功，即将进入登录页面");
                    this.golog();
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.register {
    width: 100%;
    padding: 0 15px;

    .header {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid #000;

        i {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url(@/assets/back.png);
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    .reg_box {
        padding-top: 20px;
    }
    .reg_titile {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .reg_from {
        .text {
            width: 100%;
            padding: 15px 0 10px;
            border-bottom: 1px solid #f0f0f0;

            span {
                padding-right: 10px;
                border-right: 1px solid #f0f0f0;
            }

            input {
                outline: 0;
                border: 0;
                padding-left: 10px;
            }
        }
        .password {
            padding: 20px 0 15px;
            border-bottom: 1px solid #f0f0f0;

            input {
                outline: 0;
                border: 0;
            }
        }
    }

    .reg_btn {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        border: 1px solid #f0f0f0;
        background: #ececec;
        font-size: 16px;
        color: #fff;
        padding: 10px;
        border-radius: 20px;

        &.active {
            background: #e0c9a0;
        }
    }
}
</style>
